<template>
  <div class="peking-opera-home">
    <!-- 导航栏 -->
    <el-menu
      :default-active="activeIndex"
      class="nav-menu"
      mode="horizontal"
      background-color="#b31b23"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-menu-item index="/" class="logo-item">
        <img src="@/assets/logo.png" alt="京剧徽标" class="nav-logo">
      </el-menu-item>
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/repertoire">剧目介绍</el-menu-item>
      <el-menu-item index="/masters">名家风采</el-menu-item>
      <el-menu-item index="/history">历史渊源</el-menu-item>
      <el-menu-item index="/watch">在线观赏</el-menu-item>
      <el-menu-item index="/contact">联系我们</el-menu-item>
    </el-menu>

    <!-- Banner -->
    <div class="banner-container">
      <div class="banner-mask">
        <h1 class="banner-title">国粹京剧</h1>
        <p class="banner-subtitle">传承千年文化 品味戏曲经典</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '/'
    }
  }
}
</script>
<!-- 
<style lang="sass" scoped> -->
<style lang="scss" scoped>
.peking-opera-home {
  font-family: "Microsoft YaHei", 微软雅黑, sans-serif;

  .nav-menu {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .nav-logo {
      height: 40px;
      margin-right: 20px;
    }

    .logo-item {
      &:hover {
        background-color: transparent !important;
      }
    }

    .el-menu-item {
      font-size: 18px;
      letter-spacing: 2px;
      transition: all 0.3s;

      &:not(.logo-item):hover {
        background-color: #8a0f16 !important;
        transform: translateY(-2px);
      }
    }
  }

  .banner-container {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                url('@/assets/opera_bg.jpg') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;

    .banner-mask {
      padding: 20px;
      background: rgba(179, 27, 35, 0.8);
      border-radius: 10px;
    }

    .banner-title {
      font-size: 4rem;
      margin-bottom: 20px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
      letter-spacing: 5px;
    }

    .banner-subtitle {
      font-size: 1.5rem;
      letter-spacing: 3px;
    }
  }
}
</style>